<template>
    <div>
        <Jdd-Card border="0" class="part" padding="20px 15px">
            <div class="part-tit">基本详情页</div>
            <div class="part-con">详情页主要是为用户展示详细的信息。基础详情页只是信息简单的拼合罗列，没有模块的嵌套关系。多行文本行间距为字号的2倍。</div>
        </Jdd-Card>

        <Jdd-Card border="0" padding="20px 15px" class="part">
            <!--基本信息-->
            <Jdd-Panel title="基本信息" icon="icon-matchRules" border="0" padding="0">
                <Jdd-TextInfo v-model="detailInfo" :col="3" padding="0 0 0 20px"></Jdd-TextInfo>
                <Jdd-Card background="#FAFAFA" border="0" padding="10px 20px">
                    <div class="mark">注：若应用联系人变更或遗漏,请应用负责人登录应用信息归属系统变更：
                        sure（ http://sure.cbpmgt.com ，咚咚群3231282）、j-one
                        （ http://j-one.jd.com ，咚咚群4926255）、lambda（http://lambda.jdfmgt.com ，咚咚群80229528）
                    </div>
                </Jdd-Card>
                <Jdd-LabelSlot label="您可以" padding="0 20px">
                    <div class="link-a">
                        <a>修改告警规则</a>
                        <a>查看日志详情</a>
                        <a>错误历史趋势</a>
                    </div>
                </Jdd-LabelSlot>
            </Jdd-Panel>
            <Divider></Divider>
            <!--告警详情-->
            <Jdd-Panel title="告警详情（收敛）" icon="icon-alarm" border="0" padding="0">
                <Jdd-TextInfo v-model="alarmInfo" padding="0 0 0 20px"></Jdd-TextInfo>
            </Jdd-Panel>
            <Divider></Divider>
            <!--告警IP统计数据-->
            <Jdd-Panel title="告警IP统计数据（共7项）" icon="icon-IP" border="0" padding="0" class="margin-bottom30">
                <Jdd-TablePage v-bind="table1"></Jdd-TablePage>
            </Jdd-Panel>
            <!--应用所有服务器IP列表-->
            <Jdd-Panel title="应用所有服务器IP列表（共7台）" icon="icon-host" border="0" padding="0">
                <Jdd-TablePage v-bind="table2"></Jdd-TablePage>
            </Jdd-Panel>
        </Jdd-Card>
    </div>
</template>

<script>
export default {
  name: 'baseInfo',
  data () {
    return {
      detailInfo: {
        应用: 'sgm-console',
        发送方式: 'sgm-console',
        规则开关: 'sgm-console',
        负责人: 'sgm-console',
        最后发送: 'sgm-console',
        启动时间: 'sgm-console',
        事件: 'sgm-console'
      },
      alarmInfo: {
        通知信息: '在过去的 10 秒中内，关键词 com.alibaba.dubbo.remoting.TimeoutException 在应用 crpl_risk_finance_front 的日志中出现了 12 次。 达到了预设的报警条件 10 次',
        原始日志: '2019-02-25.12:29:40.729 [JSF-BZ-22000-70-T-6981] WARN CustServiceImpl - 查询身份证审核状态 - 用户信息查询失败【用户属性集合为空，认为未上传】 - realAccId=jd_WfyKDWCyTLGW, reqId=172.24.45.22' +
            '2019-01-30.17:16:17.832 [http-bio-8080-exec-68] WARN MemoController - [更新外部janus用户数据异常，e:{}' +
            '    com.alibaba.fastjson.JSONException: syntax error, pos 5, json : '
      },
      table1: {
        showBanner: false,
        showPager: false,
        tColumns: [
          {
            title: 'Name',
            key: 'name'
          },
          {
            title: 'Age',
            key: 'age'
          }
        ],
        tData: []
      },
      table2: {
        showPager: false,
        showBanner: false,
        tColumns: [
          {
            title: 'Name',
            key: 'name'
          },
          {
            title: 'Age',
            key: 'age'
          },
          {
            title: 'Date',
            key: 'date'
          }
        ],
        tData: [
          {
            name: 'John Brown',
            age: 18,
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            date: '2016-10-02'
          }
        ]
      }
    }
  }
}
</script>
<style scoped type="text/less" lang="less">
    .part {
        margin-bottom: 10px;
        .part-tit{
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .part-con{
            line-height: 28px;
        }
    }
    .mark{
        color: #F05A28 ;
        line-height: 28px;
    }
    .margin-bottom30{
        margin-bottom: 30px;
    }
    .link-a{
        a:not(:last-child){
            &::after{
                content: '/';
                margin: 0 3px 0 6px;
                color: #1F2000;
            }
        }
    }
</style>
